<template>
  <div class="ele-body">
    <el-row :gutter="20">
      <el-col :span="4" v-if="row_span != 24">
        <three-schoole
          @getData="getDatas"
          :activeList="activeList"
          @show="row_span = 24"
        >
        </three-schoole
      ></el-col>
      <el-col :span="row_span">
        <el-card shadow="never">
          <!-- 搜索表单 -->
          <el-form
            :model="query"
            label-width="50px"
            class="ele-form-search"
            @keyup.enter.native="reload"
            @submit.native.prevent
          >
            <el-row :gutter="15" style="position: relative">
              <span
                title="展开列表"
                @click="row_span = 20"
                v-if="row_span != 20"
                class="el-icon-d-arrow-right right_show"
              ></span>
              <el-col :lg="6" :md="12">
                <p style="text-indent: 50px; line-height: 40px">
                  <b>学校名称：{{ query.schoole_name || "暂无学校" }}</b>
                </p>
              </el-col>
              <el-col :lg="5" :md="12">
                <el-form-item label="年级:">
                  <!-- <el-select
                    style="width: 100%"
                    clearable
                    v-model="query.grade_id"
                    placeholder="请选择年级"
                  >
                    <el-option
                      :value="index + 1"
                      :label="item"
                      v-for="(item, index) in nianji"
                      :key="index"
                    />
                  </el-select> -->
                  <el-select
                    style="width: 100%"
                    clearable
                    :disabled="!query.schoole_id"
                    v-model="query.grade_id"
                    placeholder="请输入年级"
                  >
                    <el-option
                      :value="item.id"
                      :label="item.title"
                      v-for="(item, index) in gradeList"
                      :key="index"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="5" :md="12">
                <el-form-item label="班级:">
                  <el-select
                    style="width: 100%"
                    clearable
                    v-model="query.title"
                    placeholder="请选择班级号"
                  >
                    <el-option
                      :value="item"
                      :label="item + '班'"
                      v-for="(item, index) in 50"
                      :key="index"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="12">
                <el-form-item label-width="0">
                  <el-input
                    clearable
                    :maxlength="20"
                    v-model="query.keyword"
                    placeholder="请输入关键字"
                  />
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="12">
                <div class="ele-form-actions">
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    class="ele-btn-icon"
                    @click="reload"
                    >查询
                  </el-button>
                  <el-button @click="reset">重置</el-button>
                </div>
              </el-col>
            </el-row>
          </el-form>
          <div class="toolbar-box" style="margin-bottom: 20px">
            <div class="tool-tab">
              <el-button
                size="small"
                type="primary"
                icon="el-icon-plus"
                class="ele-btn-icon"
                @click="openEdit(null)"
                >添加
              </el-button>
              <el-button
                size="small"
                type="danger"
                icon="el-icon-delete"
                class="ele-btn-icon"
                @click="removeBatch"
                >删除
              </el-button>
            </div>
            <div class="tool-btn">
              <el-button
                @click="showImport = true"
                icon="el-icon-upload2"
                class="ele-btn-icon"
                size="small"
                >导入
              </el-button>
              <el-button
                size="small"
                type="default"
                icon="el-icon-download"
                class="ele-btn-icon"
                @click="exportExcel"
                >导出
              </el-button>
            </div>
          </div>
          <!-- 数据表格 -->
          <el-table
            border
            lazy
            ref="table"
            :data="data"
            v-loading="loading"
            height="calc(100vh - 315px)"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column
              label="序号"
              width="55"
              align="center"
              type="index"
            >
              <template slot-scope="scope">
                <span
                  v-text="$setTableIndex(query.page, query.limit, scope.$index)"
                >
                </span>
              </template>
            </el-table-column>
            <el-table-column label="学校" align="center" prop="title">
              <template>
                <div>
                  {{ query.schoole_name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="年级" align="center" prop="grade_id">
              <template slot-scope="scope">{{
                nianji[scope.row.grade_id - 1]
              }}</template>
            </el-table-column>
            <el-table-column label="班级" align="center" prop="title">
              <template slot-scope="scope">{{ scope.row.title }}</template>
            </el-table-column>
            <el-table-column
              label="老师"
              align="center"
              prop="teacher"
              width="200"
            >
              <template slot-scope="{ row }">
                <el-tag
                  size="medium"
                  v-for="(v, i) in row.teacher"
                  :key="i"
                  style="margin-top: 5px"
                  >{{ v.realname }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              label="班级人数"
              align="center"
              prop="student_count"
            />
            <el-table-column
              label="排序"
              align="center"
              prop="sort"
              width="50"
            />
            <el-table-column
              label="创建时间"
              align="center"
              prop="create_time"
              width="200"
            >
              <template slot-scope="scope">{{
                scope.row.create_time
                  ? $util.toDateString(scope.row.create_time)
                  : "暂无"
              }}</template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              fixed="right"
              width="200"
              :resizable="true"
            >
              <template slot-scope="{ row }">
                <el-link
                  type="text"
                  :underline="false"
                  icon="el-icon-edit"
                  @click="openEdit(row)"
                  >修改
                </el-link>
                <el-popconfirm
                  class="ele-action"
                  title="确定要删除该班级吗？"
                  @confirm="remove(row)"
                >
                  <el-link
                    type="text"
                    slot="reference"
                    :underline="false"
                    icon="el-icon-delete"
                    >删除
                  </el-link>
                </el-popconfirm>
                <br />
                <el-link type="text" :underline="false" @click="bjmd_fn(row)"
                  >班级名单
                </el-link>
                <el-link type="text" :underline="false" @click="bjkq_fn(row)"
                  >班级考勤
                </el-link>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total="total"
            :page.sync="query.page"
            :limit.sync="query.limit"
            @pagination="getData"
          />
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      title="班级考勤"
      :visible.sync="dialogVisible"
      width="70vw"
      :lock-scroll="false"
      :destroy-on-close="true"
    >
      <bjkq-ttj
        :id="query.schoole_id"
        :name="query.schoole_name"
        :data="current"
      />
    </el-dialog>

    <!-- 班级名单 -->
    <bjmd
      :id="query.schoole_id"
      :name="query.schoole_name"
      :data="current"
      :visible.sync="bjmdShow"
    />

    <!-- 编辑弹窗 -->
    <indexList-edit
      :id="query.schoole_id"
      :name="query.schoole_name"
      :data="current"
      :visible.sync="showEdit"
      @done="reload"
    />
    <!-- 导入弹窗-->
    <importFile
      :schooleId="query.schoole_id"
      :visible.sync="showImport"
      @done="reload"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import indexListEdit from "./indexList-edit.vue";
import regions from "ele-admin/packages/regions";
import threeSchoole from "@/components/three_schoole.vue";
import importFile from "./importFile";
import bjmd from "./bjmd.vue";
import bjkqTtj from "./bjkq-ttj.vue";

export default {
  name: "SystemUser",
  components: { indexListEdit, threeSchoole, importFile, bjmd, bjkqTtj },
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      // 省市区数据
      regions: regions,
      row_span: 20,
      nianji: [
        "一年级",
        "二年级",
        "三年级",
        "四年级",
        "五年级",
        "六年级",
        "七年级",
        "八年级",
        "九年级",
      ],
      // 选中的省市区
      city: [],
      loading: false, // 表格加载状态
      selection: [], // 表格选中数据
      total: 0, // 数据总数
      data: [], // 表格数据接口
      // 表格搜索条件
      query: {
        page: 1,
        limit: 20,
        title: null,
        grade_id: "",
        keyword: "",
        schoole_id: "",
        schoole_name: "",
      },
      streetsList: [],
      schoolList: [],
      activeList: [],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      // 是否显示导入弹窗
      showImport: false,
      schoolListData: [],
      bjmdShow: false,
      bjkqShow: false,
      dialogVisible: false,
    };
  },
  mounted() {
    this.$http
      .get("/schoole/index", {
        params: {
          page: 1,
          limit: 1,
        },
      })
      .then((res) => {
        if (res.data.count == 0) return;
        this.query = {
          page: 1,
          limit: 20,
          title: null,
          grade_id: "",
          keyword: "",
          schoole_id: res.data.data[0].id,
          schoole_name: res.data.data[0].title,
        };
        this.activeList = [
          res.data.data[0].province_code,
          res.data.data[0].city_code,
          res.data.data[0].district_code,
          res.data.data[0].streets_code,
        ];
        this.getData();
      })
      .catch((e) => {
        this.loading = false;
        this.$message.error(e.message);
      });
  },
  watch: {},
  methods: {
    bjmd_fn(row) {
      this.current = row;
      this.bjmdShow = true;
    },
    bjkq_fn(row) {
      this.dialogVisible = true;
      this.current = row;
    },
    getDatas(data) {
      console.log(data);
      this.query = {
        page: 1,
        limit: 20,
        title: null,
        grade_id: "",
        keyword: "",
        schoole_id: data.data.value,
        schoole_name: data.data.label,
      };
      this.getData();
    },
    /* 获取表格数据 */
    getData() {
      this.loading = true;
      this.$http
        .get("/classes/index", { params: this.query })
        .then((res) => {
          this.loading = false;
          this.total = res.data.count;
          this.data = res.data.data;
        })
        .catch((e) => {
          this.loading = false;
          this.$message.error(e.message);
        });
    },
    getSchoolListData() {
      this.loading = true;
      this.$http
        .get("/schoole/index", {
          params: {
            page: 1,
            limit: 9999,
            province_code: this.query.province_code,
            city_code: this.query.city_code,
            district_code: this.query.district_code,
            streets_code: this.query.streets_code,
          },
        })
        .then((res) => {
          this.schoolListData = res.data.data;
        })
        .catch((e) => {
          this.loading = false;
          this.$message.error(e.message);
        });
    },
    /* 查询数据 */
    reload() {
      this.getData();
    },
    /* 重置搜索 */
    reset() {
      this.query.grade_id = "";
      this.query.title = "";
      this.query.keyword = "";
      this.query.page = 1;
      this.reload();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selection = selection;
    },
    /* 显示编辑 */
    openEdit(row) {
      this.current = row;
      this.showEdit = true;
    },
    /* 删除 */
    remove(row) {
      const loading = this.$loading({ lock: true });
      this.$http
        .post(`/classes/delete`, { id: row.id })
        .then((res) => {
          loading.close();
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },
    /* 批量删除 */
    removeBatch() {
      if (!this.selection.length) {
        this.$message.error("请至少选择一条数据");
        return;
      }
      this.$confirm("确定要删除选中班级吗?", "提示", {
        type: "warning",
      })
        .then(() => {
          const loading = this.$loading({ lock: true });
          this.$http
            .post("/classes/delete", { id: this.selection.map((d) => d.id) })
            .then((res) => {
              loading.close();
              if (res.data.code === 0) {
                this.$message({ type: "success", message: res.data.msg });
                this.reload();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        })
        .catch(() => {});
    },
    /* 导出数据Excel */
    exportExcel() {
      let info = JSON.parse(JSON.stringify(this.query));
      console.log(info);
      this.$http
        .get("/classes/exportExcel", { params: { ...info, export_type: 0 } })
        .then((res) => {
          let data = res.data;
          if (data.code == 0) {
            // 下载文件
            window.location.href = data.data;
            this.$message({
              type: "success",
              message: "导出成功",
            });
          } else {
            this.$message.error("导出失败");
          }
        });
    },
  },
};
</script>

<style scoped>
.toolbar-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.right_show {
  position: absolute;
  left: -15px;
  top: 2px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  background-color: #1890ff;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  width: 30px;
  color: #fff;
  cursor: pointer;
}
</style>